<template>
  <list-frame :show-advance-query="false" :total="totalCount" :table-data="menuList" :columns="columns"
    @page-changed="pageChanged" @size-changed="sizeChanged" @query="onQuery" :show-operation="false" inner-control>
    <template #base></template>
    <template #append>
      <el-button type="primary" color="#626aef" @click="onCreate">添加菜单</el-button>
      <create-view :visible="popupVisible" @close="onClose"></create-view>
    </template>
    <template #operations>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ApiTree from '@/server/api-tree';
import { onMounted, ref } from 'vue';
import CreateView from './CreateView.vue';
import type { MenuVO } from '@/server/menu/types';
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "group", colName: "菜单分组", width: 0 },
  { prop: "menuCode", colName: "菜单编码", width: 0 },
  { prop: "menu", colName: "菜单名称", width: 0 },
  { prop: "orderBy", colName: "排序", width: 0 },
  { prop: "cuser", colName: "创建人", width: 0 },
  { prop: "ctime", colName: "创建时间", width: 0 },
]);
/** 查询列表 */
const menuList = ref<MenuVO[]>([])
const totalCount = ref(0);
const getMenuList = async () => {
  const { data, totalCount: count } = await ApiTree.menu.list();
  if (data) {
    menuList.value = data;
    totalCount.value = count;
  }
}
const pageChanged = () => { }
const sizeChanged = () => { }
const onQuery = () => {
  getMenuList();
}

/** 添加/修改字典 */
const popupVisible = ref(false)
const currentDict = ref<MenuVO | null>(null);
const onCreate = () => {
  currentDict.value = null;
  popupVisible.value = true;
}
const onClose = () => {
  getMenuList();
  popupVisible.value = false;
}
onMounted(() => {
  getMenuList();
})
</script>
<style lang="scss" scope></style>
